<template>
  <view class="mine-container">
    <!-- 顶部个人信息区域 -->
    <view class="user-info-section">
      <view class="settings-icon" @tap="navigateTo('settings')">
        <image class="icon-image" src="@/static/icons/setting.png" mode="aspectFit"></image>
      </view>
      
      <view class="user-avatar" @tap="handleLogin">
        <image class="avatar-image" :src="isLoggedIn ? '@/static/icons/about.png' : '@/static/icons/about.png'" mode="aspectFit"></image>
        <view class="login-status" :class="{ 'logged-in': isLoggedIn }">
          <text>{{ isLoggedIn ? '已登录' : '未登录' }}</text>
        </view>
      </view>
      <view class="user-name" @tap="handleLogin">
        <text>{{ isLoggedIn ? '用户名' : '点击登录' }}</text>
      </view>
      
      <!-- 顶部右侧操作按钮 -->
      <view class="action-buttons">
        <view class="action-button" @tap="handleExit">
          <text>退出</text>
        </view>
        
        <!-- 小程序环境下使用open-type="share" -->
        <!-- #ifdef MP -->
        <button class="share-btn" open-type="share">
          <text>分享</text>
        </button>
        <!-- #endif -->
        
        <!-- 非小程序环境下使用普通按钮 -->
        <!-- #ifndef MP -->
        <view class="action-button" @tap="handleShare">
          <text>分享</text>
        </view>
        <!-- #endif -->
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view scroll-y="true" class="content-area">
      <!-- 第一块：功能按钮 -->
      <view class="section">
        <view class="button-row">
          <view class="grid-button" @tap="navigateTo('forum')">
            <view class="icon-container">
              <image class="icon-image" src="@/static/icons/forum.png" mode="aspectFit"></image>
            </view>
            <text class="button-text">校园论坛</text>
          </view>
          <view class="grid-button" @tap="navigateTo('takeout')">
            <view class="icon-container">
              <image class="icon-image" src="@/static/icons/helper.png" mode="aspectFit"></image>
            </view>
            <text class="button-text">外卖</text>
          </view>
          <view class="grid-button" @tap="navigateTo('helper')">
            <view class="icon-container">
              <image class="icon-image" src="@/static/icons/helper.png" mode="aspectFit"></image>
            </view>
            <text class="button-text">互助跑腿</text>
          </view>
          <view class="grid-button" @tap="navigateTo('wechat')">
            <view class="icon-container">
              <image class="icon-image" src="@/static/icons/wechat.png" mode="aspectFit"></image>
            </view>
            <text class="button-text">公众号</text>
          </view>
        </view>
      </view>
      
      <!-- 第二块：隐私和关于 -->
      <view class="section">
        <view class="list-item" @tap="navigateTo('privacy')">
          <text class="item-text">隐私说明</text>
          <text class="item-arrow">></text>
        </view>
        <view class="list-item" @tap="navigateTo('about')">
          <text class="item-text">关于</text>
          <text class="item-arrow">></text>
        </view>
      </view>
      
      <!-- 第三块：分享和联系 -->
      <view class="section">
        <!-- 小程序环境下使用open-type="share" -->
        <!-- #ifdef MP -->
        <button class="list-item share-list-item" open-type="share">
          <text class="item-text">分享小程序</text>
          <text class="item-arrow">></text>
        </button>
        <!-- #endif -->
        
        <!-- 非小程序环境下使用普通按钮 -->
        <!-- #ifndef MP -->
        <view class="list-item" @tap="handleShare">
          <text class="item-text">分享小程序</text>
          <text class="item-arrow">></text>
        </view>
        <!-- #endif -->
        
        <view class="list-item" @tap="navigateTo('contact')">
          <text class="item-text">联系Jack</text>
          <text class="item-arrow">></text>
        </view>
      </view>
      
      <!-- 底部版权信息 -->
      <view class="footer">
        <view class="version-info">
          <text>当前版本号：1.0.0</text>
        </view>
        <view class="creator-info">
          <text>小程序由Jack和人制作，如有错误还请见谅</text>
        </view>
        <view class="copyright">
          <text>Copyright @ 2025 jack</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false
    }
  },
  onLoad() {
    // 检查用户是否已登录
    this.checkLoginStatus();
  },
  methods: {
    checkLoginStatus() {
      // 确保初始状态为未登录
      this.isLoggedIn = false;
      
      // 清除可能存在的登录信息，确保从未登录状态开始
      uni.removeStorageSync('token');
      uni.removeStorageSync('isLoggedIn');
      
      // console.log('初始化为未登录状态');
    },
    navigateTo(target) {
      const routes = {
        'settings': '/pages/mine/settings',
        'profile': '/pages/mine/profile',
        'forum': '/pages/forum/forum',
        'takeout': '/pages/takeout/takeout',
        'helper': '/pages/helper/helper',
        'wechat': '/pages/wechat/wechat',
        'privacy': '/pages/mine/privacy',
        'about': '/pages/mine/about',
        'contact': '/pages/mine/contact'
      };
      
      if (routes[target]) {
        // 检查页面是否存在，如果不存在则显示开发中提示
        uni.showToast({
          title: `功能【${this.getTargetName(target)}】开发中`,
          icon: 'none'
        });
        // uni.navigateTo({
        //   url: routes[target]
        // });
      } else {
        uni.showToast({
          title: `功能【${target}】开发中`,
          icon: 'none'
        });
      }
    },
    
    getTargetName(target) {
      const names = {
        'settings': '设置',
        'profile': '个人资料',
        'forum': '校园论坛',
        'takeout': '外卖',
        'helper': '互助跑腿',
        'wechat': '公众号',
        'privacy': '隐私说明',
        'about': '关于',
        'contact': '联系Jack'
      };
      return names[target] || target;
    },
    
    handleLogin() {
      if (this.isLoggedIn) {
        // 已登录状态，显示用户菜单
        uni.showActionSheet({
          itemList: ['个人资料', '退出登录'],
          success: (res) => {
            if (res.tapIndex === 0) {
              // 个人资料
              this.navigateTo('profile');
            } else if (res.tapIndex === 1) {
              // 退出登录
              this.logout();
            }
          }
        });
      } else {
        // 未登录状态，执行登录
        this.login();
      }
    },
    
    login() {
      // 模拟登录过程
      uni.showLoading({
        title: '登录中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        this.isLoggedIn = true;
        // 保存登录状态到本地存储
        uni.setStorageSync('token', 'mock_token_' + Date.now());
        uni.setStorageSync('isLoggedIn', true);
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
      }, 1000);
    },
    
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            this.isLoggedIn = false;
            // 清除本地存储的登录信息
            uni.removeStorageSync('token');
            uni.removeStorageSync('isLoggedIn');
            
            uni.showToast({
              title: '已退出登录',
              icon: 'none'
            });
          }
        }
      });
    },
    handleExit() {
      // 处理退出小程序
      uni.showModal({
        title: '提示',
        content: '确定要退出小程序吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用小程序退出API
            uni.exitMiniProgram();
          }
        }
      });
    },
    handleShare() {
      // 在uni-app中，小程序环境不能主动调起分享，只能通过右上角菜单或button的open-type="share"
      
      // #ifdef APP-PLUS
      // App环境下，可以主动调起分享菜单
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 0,
        title: "NTU南通大学校园助手",
        summary: "南通大学校园服务平台，提供校园资讯、课程表、成绩查询等功能",
        imageUrl: "/static/logo.png",
        href: "https://ntu.edu.cn",
        success: (res) => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          });
        },
        fail: (err) => {
          uni.showToast({
            title: '分享失败',
            icon: 'none'
          });
        }
      });
      // #endif
      
      // #ifdef H5
      // H5环境下复制分享链接
      const shareUrl = window.location.href;
      uni.setClipboardData({
        data: shareUrl,
        success: () => {
          uni.showToast({
            title: '分享链接已复制，请粘贴发送给好友',
            icon: 'none',
            duration: 2000
          });
        }
      });
      // #endif
      
      // 小程序环境下提示使用右上角分享
      // #ifdef MP
      uni.showToast({
        title: '点击右上角"..."按钮进行分享',
        icon: 'none',
        duration: 2000
      });
      // #endif
    }
  },
  // 定义页面的分享行为
  onShareAppMessage() {
    return {
      title: 'NTU南通大学校园助手',
      path: '/pages/home/home',
      imageUrl: '/static/logo.png'
    }
  },
  // 定义分享到朋友圈的行为
  onShareTimeline() {
    return {
      title: 'NTU南通大学校园助手',
      query: '',
      imageUrl: '/static/logo.png'
    }
  }
}
</script>

<style>
.mine-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

/* 顶部用户信息区域样式 */
.user-info-section {
  background-color: #1e3c72;
  color: #fff;
  padding: calc(20rpx + 44px) 30rpx 30rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.settings-icon {
  position: absolute;
  top: calc(20rpx + 44px);
  left: 30rpx;
  font-size: 40rpx;
  width: 40rpx;
  height: 40rpx;
}

.icon-image {
  width: 100%;
  height: 100%;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
  margin-top: 20rpx;
  overflow: hidden;
  position: relative;
}

.avatar-image {
  width: 80%;
  height: 80%;
}

.login-status {
  position: absolute;
  bottom: -5rpx;
  right: -5rpx;
  background-color: #ff4757;
  color: white;
  font-size: 20rpx;
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
  border: 2rpx solid white;
}

.login-status.logged-in {
  background-color: #2ed573;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  text-align: center;
}

.action-buttons {
  position: absolute;
  bottom: 20rpx;
  right: 30rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}

.action-button {
  margin-left: 20rpx;
  font-size: 28rpx;
  opacity: 0.8;
  padding: 10rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
}

/* 分享按钮样式 */
.share-btn {
  margin-left: 20rpx;
  font-size: 28rpx;
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 10rpx 20rpx;
  line-height: 1;
  border: none;
  height: auto;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 30rpx;
}

.share-btn::after {
  border: none;
}

.share-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
  width: 100%;
  text-align: left;
  background: none;
  border-radius: 0;
}

.share-list-item::after {
  border: none;
}

/* 内容区域样式 */
.content-area {
  flex: 1;
  overflow-y: auto;
}

/* 区块样式 */
.section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 功能按钮样式 */
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.grid-button {
  width: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  margin-bottom: 20rpx;
}

.icon-container {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.button-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}

/* 列表项样式 */
.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.list-item:last-child {
  border-bottom: none;
}

.item-text {
  font-size: 30rpx;
  color: #333;
}

.item-arrow {
  font-size: 30rpx;
  color: #999;
}

/* 底部版权信息样式 */
.footer {
  padding: 40rpx 20rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.version-info {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.creator-info {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.copyright {
  font-size: 24rpx;
  color: #999;
  width: 100%;
  text-align: center;
  margin-top: 20rpx;
}
</style>